@layout("/common/_container.html"){
<style>
    ul {
        padding: 0;
        margin: 0;
    }

    .nav_ul {
        border-bottom: 5px solid #30add2;
        margin-bottom: 20px;
    }

    .nav_ul > li > a {
        color: #565656;
        border: 1px solid #dddddd;
    }

    .nav_table {
        margin-top: 10px;
    }

    .ul_flex {
        display: flex;
        padding: 0;
    }

    .ul_flex > li {
        flex: 1;
    }

    .ul_flex ul {
        padding: 0;
    }

    .ul_flex ul > li {
        line-height: 52px;
    }

    .ul_flex span {
        display: inline-block;
        width: 110px;
    }

    .home_box {
        border: 1px solid white;
        border-radius: 5px;
        overflow: hidden;
        padding-bottom: 30px;
    }

    .btnBox button {
        background: #30add1;
        color: white;
        width: 96px;
    }

    .inputOne {
        width: 65%;
        padding-left: 10px;
        border-radius: 3px;
        height: 39px;
        border: 1px solid #999999;
        margin-left: 5px;
    }

    .spanBig {
        font-weight: bold;
    }

    .project {
        display: flex;
        text-align: center;
        line-height: 40px;
    }

    .project > div {
        flex: 1;
        margin-right: 2%;
        border-radius: 5px;
        margin-bottom: 15px;
    }

    #sortPayService > li, #sortForNoDeal > li, #firstLevelProjectDiv > div, #firstLevelProjectDiv1 > div {
        border: none;
        border-top: 1px solid #d3d3d3;
        background: #f7f7f7;
    }

    .divHeader {
        background: #e8e8e8;
        border-radius: 10px;
        line-height: 45px;
        font-weight: bold;

    }

    #payServiceName > div {
        border-top: 1px solid #f7f7f7
    }

    #detailedListDiv {
        background: #f7f7f7;
        height: 300px;
        width: 98%;
        border-radius: 10px;
    }

    #department, #firstLevelProject {
        border: none;
        outline: none;
        background: #f7f7f7;
        text-align: center;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        background: #30add2;
        border-bottom: 1px solid #30add2;
        color: white;
    }

    .demo--label {
        margin: 5px 20px 0 0;
        display: inline-block
    }

    .demo--radio {
        display: none
    }

    .demo--radioInput {
        background-color: #fff;
        border: 2px solid rgba(0, 0, 0, 0.15);
        border-radius: 100%;
        display: inline-block;
        height: 28px;
        margin-right: 10px;
        margin-top: -1px;
        vertical-align: middle;
        width: 28px;
        line-height: 1
    }

    .demo--radio:checked + .demo--radioInput:after {
        background-color: #00A1E9;
        border-radius: 100%;
        content: "";
        display: inline-block;
        height: 17px;
        margin-left: 3px;
        margin-top: 3px;
        width: 17px
    }

    .demo--checkbox.demo--radioInput, .demo--radio:checked + .demo--checkbox.demo--radioInput:after {
        border-radius: 0
    }

    .demo--radio:checked + .demo--radioInput {
        border: 2px solid #00A1E9;
    }

    .textareaBox {
        width: 100%;
        line-height: 40px;
        text-indent: 1em;
        background: #f7f7f7;
        border: none;
        border-radius: 6px;
    }

    .input_style {
        width: 50%;
        height: 39px;
        border: 1px solid #cccccc;
        border-radius: 3px;
        padding-left: 10px;
    }

    .selectBox {
        width: 190px;
        height: 39px;
    }

    .ulBoxF > li {
        float: left;
        margin-right: 30px;
    }

    .ulBoxF input, .selectBox {
        border-radius: 3px;
        border: 1px solid #a9a9a9;
    }
</style>
<div>
    <div style="display: none">
        <input id="arrears" value="0">
        <input id="totleFoldingPays" value="">
        <input type="hidden" id="operationTime" value="${operationTime}">
        <input type="hidden" id="customerId" value="${id}">
        <input type="hidden" id="reservationsId" value="${reservationsId}">
    </div>
    <div class="col-sm-12" style="margin-bottom: 20px;">
        <div class="col-sm-4">
            <span>收费项目名称</span>
            <input type="text" id="payServiceNames" placeholder="首字母搜索" class="inputOne">
        </div>
        <div class="col-sm-4">
            <span>价格</span>
            <input type="text" id="payServicePrices" placeholder="首字母搜索" class="inputOne">
        </div>
        <div class="col-sm-4 btnBox">
            <div style="float: right">
                <button type="button" class="btn" onclick="IsDealInfoDlg.search()">搜索</button>
                <button type="button" class="btn" onclick="IsDealInfoDlg.resetSearch()">清空</button>
            </div>
        </div>
    </div>


    <div class="col-sm-12 project">
        <div style="overflow:auto;background: #f7f7f7;" class="sortRight">
            <div class="divHeader">科室</div>
            <#sortPayService  id="sortPayService" list="${payServiceInfoList}"/>
        </div>
        <div style="background: #f7f7f7;">
            <div class="divHeader">一级项目</div>
            <div id="firstLevelProjectDiv" style="height: 350px;overflow:auto;" class="sortRight"></div>
        </div>
        <div style="background: #f7f7f7;">
            <div class="divHeader">收费项目</div>
            <div id="payServiceName" style="height: 350px;overflow:auto;" class="sortRight">
            </div>
        </div>
    </div>


    <div class="col-sm-12">
        <div id="detailedListDiv" class="sortRight" style="position: relative">

        </div>
    </div>
    <div class="col-sm-12">
        <p>备注：</p>
        <input id="remarkss" name="remarkss"
               style="background:#f7f7f7;width: 98%;border-radius: 10px;height: 50px;border: none"/>
    </div>

    <div class="col-sm-12">
        <div class="row btn-group-m-t">
            <div class="col-sm-10">
                <div style="display: none">
                    <input disabled="disabled" id="doctor" name="医生"/>
                    <div class="other_bt" onclick="IsDealInfoDlg.distributiveDoctor()">分配医生</div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="btnBox">
                    <button type="button" class="btn" onclick="saveDeal()">提交</button>
                    <button type="button" id="cancel" style="background:#da6792;" class="btn"
                            onclick="IsDealInfoDlg.close()">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/tcCenter/consultant/update_deal_info.js"></script>
<script src="${ctxPath}/static/modular/tcCenter/consultant/consultant_infos.js"></script>
<script>
    var customerId = document.getElementById("customerId").value;

    $("ul#sortPayService,ul#sortForNoDeal").on("click", "li", function () {
        $("#sortPayService>li").css({"background": "#f7f7f7", "border-color": "#d3d3d3;", "color": "#4f4f4f"});
        $("#sortForNoDeal>li").css({"background": "#f7f7f7", "border-color": "#d3d3d3;", "color": "#4f4f4f"});
        $(this).css({"background": "#31add1", "border-color": "#f7f7f7;", "color": "white"});
        var department = $(this).text();
        var dc = department + "," + customerId;
        $.ajax({
            url: Feng.ctxPath + "/payService/getFirstLevelProject",
            type: "post",
            data: {
                "dc": dc
            },
            success: function (data) {
                var txt = '';
                for (var i = 0; i < data.length; i++) {
                    txt += ' <div style="display: inline-block;width: 100%" onclick="openFirstLevelProject(\'' + data[i].firstLevelProject + '\')"> ' +
                        ' &nbsp' + data[i].firstLevelProject + '</div>';
                    var customerId = data[i].customerId;
                    var department = data[i].department;
                    openFirstLevelProject = function (firstLevelProject) {
                        var cdf = customerId + "," + department + "," + firstLevelProject;
                        var txts = '';
                        $.ajax({
                            url: Feng.ctxPath + "/payService/getPaySeriveName",
                            type: "post",
                            data: {
                                "cdf": cdf
                            },
                            success: function (data1) {
                                for (var i = 0; i < data1.length; i++) {
                                    txts += ' <div style="display: inline-block;width: 400px"> ' +
                                        ' <a href=\"javascript:;\" onclick=\"openUpdateDetails(\'' + data1[i].id + '\')\">&nbsp' + data1[i].payServiceName + '&nbsp' + data1[i].payServicePriceOne + '-' + data1[i].payServicePriceTwo + '元</a> ' +
                                        ' </div>';
                                }
                                document.getElementById('payServiceName').innerHTML = txts;
                            },
                            error: function (data) {
                                alert('内部故障!');
                            }
                        });
                    };
                }
                document.getElementById('firstLevelProjectDiv').innerHTML = txt;
            },
            error: function (data) {
                alert('内部故障!');
            }
        });
    })

    $("div#firstLevelProjectDiv,div#firstLevelProjectDiv1").on('click', 'div', function () {
        $("#firstLevelProjectDiv>div").css({"background": "#f7f7f7", "border-color": "#d3d3d3;", "color": "#4f4f4f"});
        $("#firstLevelProjectDiv1>div").css({"background": "#f7f7f7", "border-color": "#d3d3d3;", "color": "#4f4f4f"});
        $(this).css({"background": "#31add1", "border-color": "#f7f7f7;", "color": "white"});
    });

    deletePayServices = function (id) {
        $.ajax({
            url: Feng.ctxPath + "/payService/deleteDealInfo",
            type: "post",
            data: {
                "id": id
            },
            success: function (data) {
                window.getdealinfolist();
                Feng.success("删除成功!");
            },
            error: function (data) {
                alert('内部故障!');
            }
        });
    }

    inputNum = function () {
        var input = document.getElementsByClassName('totleinput');
        var inputNum = 0;
        for (var i = 0; i < input.length; i++) {
            inputNum += parseFloat(input[i].value)
        }
        $("#serviceActualPay").attr("value", inputNum)
    }

    openUpdateDetails = function (id) {
        var customerId = document.getElementById("customerId").value;
        var reservationsId = document.getElementById("reservationsId").value;
        var operationTime = document.getElementById("operationTime").value;
        var cri = id + "," + customerId + "," + reservationsId + "," + operationTime;
        var index = layer.open({
            type: 2,
            title: '收费项目详情',
            area: ['90%', '90%'], //宽高
            fix: true, //不固定
            maxmin: true,
            content: Feng.ctxPath + '/payService/getPayServiceUpdateAdd/' + cri
        });
        this.layerIndex = index;
    };

    //初始加载此单的项目明细
    $(function () {
        getdealinfolist();
    })

    getdealinfolist = function () {
        $.ajax({
            url: Feng.ctxPath + "/consultant/getDealInfo",
            type: "post",
            data: {
                "reservationsId": $('#reservationsId').val(),
                "operationTime": $("#operationTime").val()
            },
            success: function (data) {
                var txt = '<ul style="padding-bottom: 10px;overflow: hidden;height: 220px;overflow-y: scroll;">';
//                var totleReceivable = 0.00;
                var totleFoldingPay = 0.00;
                var totleServiceActualPay = 0.00;
                var customerId = document.getElementById("customerId").value;
                if (data.length == 0) {
                    window.document.getElementById('detailedListDiv').innerHTML = txt;
                    window.document.getElementById('totleFoldingPays').value = totleFoldingPay;
                } else {
                    for (var i = 0; i < data.length; i++) {
                        var pnum = data[i].payServiceNum;
                        var psptwo = data[i].payServicePriceTwo;
                        var foldingPay = data[i].foldingPay;
                        var serviceActualPay = data[i].serviceActualPay;
//                        totleReceivable += pnum * psptwo.toFixed(2);
                        totleFoldingPay += foldingPay;
                        totleServiceActualPay += serviceActualPay;
                        txt += ' <div class="data_row" style="margin-top: 5px">' +
                            '                <div style=\"padding-left: 10px;width: 120px;display: inline-block;position: relative;top: 11px;\">\n' +
                            '                    <div style=\"border-bottom: 1px solid;\">\n' +
                            '                        <div style=\"font-size: 12px;display: inline-block;width:55px;border-right: 1px solid black;text-align: right;height: 22px;margin-bottom: -5px;\" id=\"yw_left_top\">' + data[i].leftUp + '</div><!--\n' +
                            '                         --><div style=\"font-size: 12px;display: inline-block;width:55px;\" id=\"yw_right_top\">' + data[i].rightUp + '</div>\n' +
                            '                   </div>\n' +
                            '                    <div>\n' +
                            '                        <div style=\"font-size: 12px;display: inline-block;width:55px;border-right: 1px solid black;text-align: right;height: 22px;margin-bottom: -5px;\" id=\"yw_left_bottom\">' + data[i].leftDown + '</div><!--\n' +
                            '                         --><div style=\"font-size: 12px;display: inline-block;width:55px;\" id=\"yw_right_top\">' + data[i].rightDown + '</div>\n' +
                            '                   </div>\n' +
                            '                </div>\n' +
                            ' ' + data[i].department + '&nbsp;&nbsp;' + data[i].firstLevelProject + '&nbsp;&nbsp;' + data[i].payServiceName + ' &nbsp;&nbsp;' + data[i].payService + '元/' + data[i].unit + '&nbsp;&nbsp;' + data[i].payServiceNum + data[i].unit + '&nbsp;&nbsp;医生:' + data[i].doctor + '&nbsp;&nbsp;医助/护士:' + data[i].nurse +
                            ' <a href=\"javascript:;\" style="color: #2fd255" onclick=\"openPayService(\'' + data[i].id + '\')\">&nbsp修改</a> <a href=\"javascript:;\" style="color: #db6693" onclick=\"deletePayServices(\'' + data[i].id + '\')\">&nbsp;&nbsp;删除</a>' + '&nbsp;&nbsp;折后价：<span id="zhe_' + data[i].id + '" class="totalzhe" style="color: #2eadd0;font-size: 2em;font-weight: bold;">' + foldingPay.toFixed(2) + ' </span>元'
                            + '<a href="javascript:;" style="color: #31d115;" onclick="openDealUpdateMoney(\'' + data[i].id + '\')">&nbsp修改折后价</a>&nbsp&nbsp;<span>实收：</span>' +
                            '<input class="serviceId" type="hidden" value="' + data[i].payServiceId + '"/>' +
                            '<input class="ids" type="hidden" value="' + data[i].id + '"/>' +
                            '<div style="display: none"><input type="text" class="totlefolding" style="border: 1px solid black;width: 115px;border-radius: 5px;padding-left: 5px;" value="' + foldingPay.toFixed(2) + '" oninput="inputNum()"/></div>' + '' +
                            '<input type="text" class="totleinput" style="border: 1px solid black;width: 115px;border-radius: 5px;padding-left: 5px;" value="' + serviceActualPay.toFixed(2) + '" oninput="inputNum()"/>' + '' +
                            '</div>';
                    }
                    txt += '</ul>';
                    txt += '<div><div style="position: absolute;right: 3%;bottom: 2%;"><p>折后金额：<span style="font-weight: bold;font-size: 22px;">' + totleFoldingPay.toFixed(2) + '</span>元 ' + //' <a href="javascript:;" style="color: #31d115;" onclick="openUpdateMoney(\'' + customerId + '\')">&nbsp修改折后价</a></p>' +
                        '<p id="arrearsOfMoney">实收金额：<input id="serviceActualPay" style="color: #30acd0;font-weight: bold;font-size: 22px;border: none;background: #f7f7f7;width:100px;" readonly="readonly" value="' + totleServiceActualPay.toFixed(2) + '" />元</p></div></div> ';

                    window.document.getElementById('detailedListDiv').innerHTML = txt;
                    window.document.getElementById('totleFoldingPays').value = totleFoldingPay;
                }
            },
            error: function (data) {
                alert('内部故障!');
            }
        });
    }

    openDealUpdateMoney = function (id) {
        var zheMoney = document.getElementById("zhe_" + id).innerText;
        var params = id + "," + zheMoney;
        var index = layer.open({
            type: 2,
            title: '修改单个项目金额',
            area: ['90%', '90%'], //宽高
            fix: true, //不固定
            maxmin: true,
            content: Feng.ctxPath + '/payService/openDealUpdateMoney/' + params
        });
        this.layerIndex = index;
    };

    openPayService = function (id) {
        var customerId = document.getElementById("customerId").value;
        var ci = customerId + "," + id;
        var index = layer.open({
            type: 2,
            title: '收费项目详情',
            area: ['90%', '90%'], //宽高
            fix: true, //不固定
            maxmin: true,
            content: Feng.ctxPath + '/payService/getDealInfoDetail/' + ci
        });
        this.layerIndex = index;
    };

    var count = 0;
    //保存修改
    saveDeal = function () {
        var str = [];
        var endtr = "";
        var remarkss = document.getElementById("remarkss").value;
        for (var i = 0; i < $(".ids").length; i++) {
            endtr = $(".ids").eq(i).val() + "#" + $(".totleinput").eq(i).val() + "#" + $(".totlefolding").eq(i).val();
            str.push(endtr)
        }
        if (remarkss == null || remarkss == "") {
            count = 0;
            alert("请填写备注！");
            return;
        }
        count++;
        if (count == 1) {
            $.ajax({
                url: Feng.ctxPath + "/payService/updateOk",
                type: "post",
                traditional: true,
                data: {
                    "str": str,
                    "remarkss": remarkss
                },
                success: function (data1) {
                    Feng.success("修改成功！");
                    parent.location.reload();
                    IsDealInfoDlg.close();
                },
                error: function (data) {
                    alert('内部故障!');
                }
            });
        }
    }

    $("#payServiceNames,#payServicePrices").on('keypress',function(event){
        if(event.keyCode == 13) {
            IsDealInfoDlg.search()
        }
    })
</script>
@}
